<template>
	<view class="profile-container">
		<!-- 头部区域 -->
		<view class="profile-header">
			<!-- 背景渐变层 -->
			<view class="header-bg"></view>

			<!-- 用户信息区域 -->
			<view class="user-info-container">
				<!-- 头像和基本信息 -->
				<view class="user-basic" @click="daka(teacher.teacherId)">
					<view class="avatar-wrapper">
						<image class="avatar" :src="teacher.avatarUrl || '/static/default-avatar.png'"
							mode="aspectFill"></image>
						<view class="verify-badge">
							<uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
						</view>
					</view>
					<!-- 修改用户信息区域 -->
					<view class="user-meta">
						<text class="welcome-text">欢迎回来</text>
						<text class="username">{{teacher.name}}</text>
						<view class="check-status" :class="{
					    'morning': checkStatus === 'morning',
					    'afternoon': checkStatus === 'afternoon',
					    'checked': (checkStatus === 'morning' && morningCheck) || 
					               (checkStatus === 'afternoon' && afternoonCheck),
					    'unchecked': (checkStatus === 'morning' && !morningCheck) || 
					                 (checkStatus === 'afternoon' && !afternoonCheck)
					  }">
							<text v-if="checkStatus === 'morning'">
								{{ morningCheck ? '上班已打卡' : '上班未打卡' }}
							</text>
							<text v-else-if="checkStatus === 'afternoon'">
								{{ afternoonCheck ? '下班已打卡' : '下班未打卡' }}
							</text>
							<text v-else>今日未打卡完成</text>
							<!-- <text class="check-time" v-if="lastCheckTime">{{ lastCheckTime }}</text> -->
						</view>
					</view>
				</view>

				<!-- 评分卡片 -->
				<view class="score-card" @click="myScore(teacher.teacherId)">
					<view class="score-stars">
						<uni-icons v-for="i in 5" :key="i" type="star-filled" size="16"
							:color="i <= Math.floor(totalScore/20) ? '#FFD700' : '#E0E0E0'"></uni-icons>
					</view>
					<view class="score-value">
						<text class="number">{{totalScore}}</text>
						<text class="label">综合评分</text>
					</view>
				</view>
			</view>

			<!-- 装饰元素 -->
			<view class="header-decoration">
				<view class="decoration-circle circle-1"></view>
				<view class="decoration-circle circle-2"></view>
				<view class="decoration-circle circle-3"></view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<!-- <xiaodu  :teacher="teacher"></xiaodu> -->
		<view class="main-content">
			<!-- 年级卡片 -->
			<view class="grade-card animate__animated animate__fadeInUp" @click="MyClass">
				<view class="grade-content">
					<view class="grade-label">当前年级</view>
					<view class="grade-value">{{ selectedGrade }}</view>
				</view>
				<view class="grade-icon">
					<uni-icons type="arrowright" size="24" color="#666"></uni-icons>
				</view>
			</view>

			<!-- 课程表卡片 -->
			<view class="schedule-card animate__animated animate__fadeInUp animate__delay-0.5s"
				@click="navigateToSchedule">
				<view class="schedule-header">
					<text class="schedule-title">今日课程表</text>
					<text class="schedule-date">{{ currentDate }}</text>
				</view>
				<view class="schedule-content">
					<view class="schedule-item" v-for="(item, index) in todayCourses" :key="index">
						<text class="course-time">{{ item.time }}</text>
						<text class="course-name">{{ item.name }}</text>
						<text class="course-class">{{ item.class }}</text>
						<text class="course-task" v-if="item.task">{{ item.task }}</text>
					</view>
				</view>
				<view class="schedule-footer">
					<text>查看完整课表</text>
					<uni-icons type="arrow-right" size="16" color="#666"></uni-icons>
				</view>
			</view>

			<!-- 功能按钮 -->
			<view class="action-buttons">
				<view class="button-wrapper animate__animated animate__fadeInUp animate__delay-0.8s">
					<view class="action-button button-primary" @click="myyiduiyi">
						<view class="button-icon">
							<uni-icons type="person" size="24" color="#fff"></uni-icons>
						</view>
						<view class="button-text">我的一对一</view>
						<view class="button-bg"></view>
					</view>
				</view>

				<view class="button-wrapper animate__animated animate__fadeInUp animate__delay-0.8s">
					<picker mode="selector" :range="grades" @change="onGradeChange">
						<view class="action-button button-secondary">
							<view class="button-icon">
								<uni-icons type="redo" size="24" color="#fff"></uni-icons>
							</view>
							<view class="button-text">切换年级</view>
							<view class="button-bg"></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {

		data() {
			return {
				teacher: {
					avatarUrl: null,
					bio: "",
					name: "",
					password: "",
					phone: "",
					tags: "",
					teacherId: 0,
				},
				activeElement: null,
				grades: [],
				selectedGrade: "",
				totalScore: 0,
				currentDate: this.formatDate(new Date()),
				todayCourses: [], // 初始化为空数组
				periodMap: {
					1: "08:00-08:45",
					2: "09:05-09:50",
					3: "10:15-11:00",
					4: "15:00-15:45",
					5: "16:05-16:50",
					6: "17:15-18:00"
				},
				checkStatus: null, // null: 未获取, 'morning': 上午打卡状态, 'afternoon': 下午打卡状态
				morningCheck: null, // null: 未获取, true: 已打卡, false: 未打卡
				afternoonCheck: null,
				lastCheckTime: null, // 最后打卡时间
				checkStatusTimer: null // 打卡状态检查定时器
			}
		},
		onShow() {
			this.getData();
			// 如果已经有teacher数据，重新加载头像
			if (this.teacher.avatarUrl) {
				const timestamp = new Date().getTime();
				// 如果是默认头像就不处理
				if (!this.teacher.avatarUrl.startsWith('/static')) {
					this.teacher.avatarUrl =
						`${globalVariable}/get/${this.teacher.avatarUrl.split('/').pop().split('?')[0]}?t=${timestamp}`;
				}
			}
		},
		onLoad() {
			this.getData();
			this.startCheckStatusTimer(); // 启动打卡状态检查
		},
		onUnload() {
			this.stopCheckStatusTimer(); // 清除定时器
		},


		methods: {
			// 启动打卡状态检查定时器
			startCheckStatusTimer() {
				this.stopCheckStatusTimer();
				this.checkStatusTimer = setInterval(() => {
					this.fetchCheckStatus();
				}, 60000); // 每分钟检查一次
				this.fetchCheckStatus(); // 立即执行一次
			},

			// 停止定时器
			stopCheckStatusTimer() {
				if (this.checkStatusTimer) {
					clearInterval(this.checkStatusTimer);
					this.checkStatusTimer = null;
				}
			},

			async fetchCheckStatus() {
				try {
					const beijingDate = this.formatBeijingDate(this.getBeijingTime());

					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: `${globalVariable}/getTeacherCheck?teacherId=${this.teacher.teacherId}&date=${beijingDate}`,
							method: 'GET',
							success: resolve,
							fail: reject
						});
					});

					if (res.data.status === 1) {
						const checkData = res.data.data;
						this.processCheckStatus(checkData);
					}
				} catch (error) {
					console.error('获取打卡状态失败:', error);
				}
			},
			// 处理打卡状态数据
			processCheckStatus(checkData) {
				const hours = this.getBeijingHour();
				// 更新打卡状态
				this.morningCheck = !!checkData.checkInTime;
				this.afternoonCheck = !!checkData.checkOutTime;
				this.lastCheckTime = checkData.checkInTime || checkData.checkOutTime;

				// 判断当前应该显示哪个打卡状态
				if (hours < 12) {
					this.checkStatus = 'morning';
				} else if (hours >= 17) {
					this.checkStatus = 'afternoon';
				} else {
					this.checkStatus = null;
				}
			},


			daka(e) {
				uni.navigateTo({
					url: "/pages/daka/daka?teacherId=" + e + "&teacherName=" + this.teacher.name
				})
			},

			// 获取北京时间
			getBeijingTime() {
				const now = new Date();
				// 北京时间比UTC快8小时
				const beijingOffset = 8 * 60 * 60 * 1000;
				return new Date(now.getTime() + beijingOffset);
			},

			// 格式化日期为北京时间 YYYY-MM-DD
			formatBeijingDate(date) {
				const year = date.getUTCFullYear();
				const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
				const day = date.getUTCDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 获取当前北京时间的小时
			getBeijingHour() {
				return this.getBeijingTime().getUTCHours();
			},
			getData() {
				let that = this;
				uni.getStorage({
					key: "teacher",
					success: function(res) {
						that.teacher = res.data
						that.grades = that.teacher.grades.split('，');
						// that.selectedGrade = that.grades[0];

						that.selectedGrade = uni.getStorageSync('selectedGrade') || that.grades[0];
						// 保存到缓存
						uni.setStorageSync('selectedGrade', that.selectedGrade);

						// 处理头像URL，添加时间戳参数
						if (that.teacher.avatarUrl == null) {
							that.teacher.avatarUrl = "/static/aver2.jpg";
						} else {
							// 添加时间戳参数防止缓存
							const timestamp = new Date().getTime();
							that.teacher.avatarUrl =
								`${globalVariable}/get/${that.teacher.avatarUrl}?t=${timestamp}`;
						}
						that.fetchTodayCourses(); // 获取今日课程
					}
				})

				uni.request({
					url: globalVariable + "/getTeacherScoreByTeacherId?teacherId=" + this.teacher.teacherId,
					success: (res) => {
						const info = res.data;
						if (info.status == 1) {
							this.processBackendData(info.data);
						}
					}
				});
			},
			// 获取今日课程表
			// 修改后的获取今日课程表方法
			fetchTodayCourses() {
				const beijingDate = this.formatBeijingDate(this.getBeijingTime());

				uni.request({
					url: `${globalVariable}/getAllCourseByTeacherAndDate?date=${beijingDate}&teacherId=${this.teacher.teacherId}`,
					success: (res) => {
						if (res.data.status === 1) {
							this.processCourseData(res.data.data);
						} else {
							this.todayCourses = [];
						}
					},
					fail: () => {
						this.todayCourses = [];
					}
				});
			},

			processCourseData(courses) {
				const hours = this.getBeijingHour();
				const isMorning = hours < 12; // 上午为true，下午为false

				// 过滤课程：上午(1-3节)或下午(4-6节)
				const filteredCourses = courses.filter(course => {
					return isMorning ? course.coursePeriod <= 3 : course.coursePeriod > 3;
				});

				// 按照课程节次排序
				filteredCourses.sort((a, b) => a.coursePeriod - b.coursePeriod);

				// 转换为前端需要的格式
				this.todayCourses = filteredCourses.map(course => ({
					time: this.periodMap[course.coursePeriod] || '--:--',
					name: course.courseName,
					class: course.grade,
					task: course.courseTask
				}));

				// 如果没有课程，显示提示
				if (this.todayCourses.length === 0) {
					this.todayCourses = [{
						time: '',
						name: isMorning ? '上午暂无课程' : '下午暂无课程',
						class: '',
						task: ''
					}];
				}
			},
			formatDate(date) {
				const beijingDate = this.getBeijingTime();
				const year = beijingDate.getUTCFullYear();
				const month = (beijingDate.getUTCMonth() + 1).toString().padStart(2, '0');
				const day = beijingDate.getUTCDate().toString().padStart(2, '0');
				const week = ['日', '一', '二', '三', '四', '五', '六'][beijingDate.getUTCDay()];
				return `${year}-${month}-${day} 周${week}`;
			},
			navigateToSchedule() {
				uni.navigateTo({
					url: "/pages/kechengbiao/kechengbiao"
				})
			},
			processBackendData(data) {
				const groupedData = {};
				let totalScore = 0;

				data.forEach(item => {
					const date = item.timestamp.split(" ")[0];
					if (!groupedData[date]) {
						groupedData[date] = {
							date: date,
							totalPoints: 0,
							items: []
						};
					}

					groupedData[date].items.push({
						name: item.scoreName,
						points: item.score
					});

					groupedData[date].totalPoints += item.score;
					totalScore += item.score;
				});

				const sortedData = Object.values(groupedData).sort((a, b) => new Date(b.date) - new Date(a.date));
				this.details = sortedData;
				this.totalScore = totalScore;
				this.scores = data;
			},
			myScore(e) {
				uni.navigateTo({
					url: "/pages/teacherScore/teacherScore?teacherId=" + e + "&teacherName=" + this.teacher.name
				})
			},
			onGradeChange(e) {
				this.selectedGrade = this.grades[e.detail.value];
				uni.setStorageSync('selectedGrade', this.selectedGrade);
				uni.showToast({
					title: `已切换到${this.selectedGrade}`,
					icon: 'success'
				});
			},
			MyClass() {
				if (!this.selectedGrade) {
					uni.showToast({
						title: '请选择年级',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/myClass/myClass?grade=" + this.selectedGrade
				})
			},
			myyiduiyi() {
				uni.navigateTo({
					url: "/pages/yiduiyi/yiduiyi"
				})
			}
		}
	}
</script>

<style scoped>
	/* 引入动画库 */
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");

	.course-task {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		display: block;
		width: 100%;
		padding-left: 180rpx;
	}

	/* 打卡状态样式 */
	.check-status {
		font-size: 26rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		background-color: #ff8dcc;

		&.checked {
			background-color: rgba(45, 226, 50, 0.5);
			/* color: #4CAF50; */
			border: 1rpx solid #4CAF50;
		}

		&.unchecked {
			background-color: rgba(244, 67, 54, 0.1);
			color: #F44336;
			border: 1rpx solid #F44336;
			animation: pulse 2s infinite;
		}

		.check-time {
			font-size: 22rpx;
			color: #666;
			margin-top: 4rpx;
		}
	}

	@keyframes pulse {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.6;
		}

		100% {
			opacity: 1;
		}
	}

	.schedule-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	/* 全局样式 */
	.profile-container {
		width: 100%;
		min-height: 100vh;
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 15, 51, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(8, 255, 111, 0.1) 0%, transparent 20%);
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		color: #333;
		position: relative;

	}

	/* 头部区域样式 */
	.profile-header {
		margin-left: 30rpx;
		margin-right: 30rpx;
		position: relative;
		height: 320rpx;
		padding: 40rpx 30rpx;
		overflow: hidden;
		border-radius: 0 0 40rpx 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
		margin-bottom: 30px;
	}

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #44b0ff 0%, #d2a6ff 100%);
		opacity: 0.95;
	}

	.user-info-container {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}

	.user-basic {
		display: flex;
		align-items: center;
	}

	.avatar-wrapper {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.verify-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 36rpx;
		height: 36rpx;
		background: #4CAF50;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #fff;
	}

	.user-meta {
		display: flex;
		flex-direction: column;
	}

	.welcome-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 6rpx;
	}

	.username {
		font-size: 36rpx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 4rpx;
		line-height: 1.2;
	}

	.user-title {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		background: rgba(255, 255, 255, 0.2);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		align-self: flex-start;
	}

	.score-card {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10px);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 0.3s ease;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);

		&:active {
			transform: scale(0.95);
			background: rgba(255, 255, 255, 0.35);
		}
	}

	.score-stars {
		display: flex;
		margin-bottom: 10rpx;
	}

	.score-value {
		display: flex;
		flex-direction: column;
		align-items: center;

		.number {
			font-size: 36rpx;
			font-weight: 700;
			color: #fff;
			line-height: 1;
		}

		.label {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 6rpx;
		}
	}

	.header-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);

		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: -80rpx;
			right: -80rpx;
		}

		&.circle-2 {
			width: 300rpx;
			height: 300rpx;
			bottom: -120rpx;
			left: -120rpx;
		}

		&.circle-3 {
			width: 160rpx;
			height: 160rpx;
			top: 40%;
			right: 20%;
		}
	}

	/* 主要内容区域 */
	.main-content {
		padding: 30rpx;
		margin-top: -30rpx;
		position: relative;
		z-index: 2;
	}

	/* 年级卡片 */
	.grade-card {
		background: linear-gradient(193deg, rgb(255 126 173 / 10%) 0%, rgb(24 198 242 / 10%) 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(24, 119, 242, 0.1) 100%);
			/* opacity: 0; */
			transition: opacity 0.3s ease;
		}

		&:active::before {
			opacity: 1;
		}
	}

	.grade-content {
		.grade-label {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.grade-value {
			font-size: 40rpx;
			font-weight: 600;
			color: #333;
			line-height: 1.2;
		}
	}

	.grade-icon {
		width: 70rpx;
		height: 70rpx;
		background: #f5f7fa;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;

		.grade-card:active & {
			transform: translateX(5rpx);
		}
	}

	/* 课程表卡片 */
	.schedule-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 6rpx;
			height: 100%;
			background: linear-gradient(to bottom, #667eea, #764ba2);
		}
	}

	.schedule-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.schedule-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				background: linear-gradient(to bottom, #667eea, #764ba2);
				border-radius: 3rpx;
			}
		}

		.schedule-date {
			font-size: 24rpx;
			color: #999;
		}
	}

	.schedule-content {
		.schedule-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.course-time {
				width: 180rpx;
				font-size: 26rpx;
				color: #666;
				font-weight: 500;
			}

			.course-name {
				flex: 1;
				font-size: 30rpx;
				font-weight: 500;
				color: #333;
			}

			.course-class {
				width: 180rpx;
				text-align: right;
				font-size: 24rpx;
				color: #999;
			}
		}

		.no-course {
			padding: 40rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}

	.schedule-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx dashed #eee;
		font-size: 26rpx;
		color: #666;
		transition: all 0.2s ease;

		.schedule-card:active & {
			color: #764ba2;
		}

		uni-icons {
			margin-left: 10rpx;
			transition: all 0.2s ease;
		}

		.schedule-card:active uni-icons {
			transform: translateX(5rpx);
		}
	}

	/* 功能按钮区域 */
	.action-buttons {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15rpx;
	}

	.button-wrapper {
		width: 50%;
		padding: 15rpx;
		box-sizing: border-box;
	}

	.action-button {
		height: 200rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);

		&:active {
			transform: scale(0.95);
		}

		.button-icon {
			margin-bottom: 20rpx;
			position: relative;
			z-index: 2;
		}

		.button-text {
			font-size: 30rpx;
			font-weight: 500;
			color: #fff;
			position: relative;
			z-index: 2;
		}

		.button-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.9;
			z-index: 1;
		}
	}

	.button-primary {
		.button-bg {
			background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
		}

		&:active .button-bg {
			background: linear-gradient(135deg, darken(#ff9a9e, 5%) 0%, darken(#fad0c4, 5%) 100%);
		}
	}

	.button-secondary {
		.button-bg {
			background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
		}

		&:active .button-bg {
			background: linear-gradient(135deg, darken(#a1c4fd, 5%) 0%, darken(#c2e9fb, 5%) 100%);
		}
	}

	/* 动画效果 */
	@keyframes float {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-10px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	.float {
		animation: float 3s ease-in-out infinite;
	}

	/* 微交互效果 */
	.ripple {
		position: relative;
		overflow: hidden;
	}

	.ripple:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
		background-repeat: no-repeat;
		background-position: 50%;
		transform: scale(10, 10);
		opacity: 0;
		transition: transform .5s, opacity 1s;
	}

	.ripple:active:after {
		transform: scale(0, 0);
		opacity: 0.3;
		transition: 0s;
	}
</style>